<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="center-w">
      <div class="head">
        <div class="title">退款管理</div>
      </div>
      <div style="overflow-y: scroll;height: 100%;">
        <el-table size="small" :data="tableData">
          :row-class-name="tableRowClassName"
          <!--  -->
          <el-table-column align="center" type="index"> </el-table-column>
          <el-table-column align="center" prop="img" label="用户头像">
            <template slot-scope="scope">
              <div
                style="display: flex; align-items: center; flex-direction: column;"
              >
                <el-image
                  style="width: 40px; height: 40px;"
                  :src="scope.row.img"
                ></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="userName" label="用户名">
          </el-table-column>
          <el-table-column align="center" prop="orderNo" label="订单号">
          </el-table-column>
          <el-table-column align="center" prop="total" label="金额">
          </el-table-column>
          <el-table-column align="center" prop="payState" label="支付方式">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column align="center" prop="steteValue" label="退款状态">
            <template slot-scope="scope">
              <span style="color:blue" v-if="scope.row.steteValue == '退款中'"
                >退款中</span
              >
              <span
                style="color: green;"
                v-if="scope.row.steteValue == '退款成功'"
                >退款成功</span
              >
              <span
                style="color: red;"
                v-if="scope.row.steteValue == '拒绝退款'"
                >拒绝退款</span
              >
              <span
                style="color: rgb(0, 110, 255);"
                v-if="scope.row.steteValue == '退款审核中'"
                >退款审核中</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            prop="remarks"
            label="退款理由"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            width="200px"
            label="操作"
          >
            <template
              v-if="scope.row.steteValue == '退款审核中'"
              slot-scope="scope"
            >
              <el-button
                size="mini"
                type="primary"
                @click="confirmRefund(scope.row, true)"
                >同意</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="confirmRefund(scope.row, false)"
                >拒绝</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";

import { getRefundList, updateRefund } from "../../api/refund";

export default {
  components: { Pagination },
  data() {
    return {
      // 目前没有做列表处理 后续需要多功能控制在进行优化处理
      tableData: [],
      pageparm: {
        pageIndex: 1,
        size: 10,
        total: 0
      }
    };
  },

  created() {
    this._getRefundList();
  },
  methods: {
    // tableRowClassName({ row, rowIndex }) {
    //   console.log(row, rowIndex);
    //   if (row.steteValue != "退款中") {
    //     return "warning-row";
    //   }
    //   return "";
    // },
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.size = parm.size;
      this._getRefundList();
    },

    // 确认退款/拒绝退款
    confirmRefund(s, x) {
      this.$confirm(`确定要${x ? "退款" : "拒绝退款"}吗？`, "确认", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          let data = {
            id: s.id,
            state: x ? 1 : -1
          };
          updateRefund(data).then(res => {
            if (res.data) {
              this.$message.success("操作成功");
              this._getRefundList();
            }
          });
        })
        .catch(action => {
          this.$message.info("取消");
        });
    },

    // 获取退款列表
    async _getRefundList() {
      let res = await getRefundList(this.pageparm);
      if (res.data) {
        let { items, totalCount } = res.data;
        this.pageparm.total = totalCount;
        this.tableData = items;
      } else {
        this.tableData = [];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 85vh;
  overflow-y: scroll;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
}

.title {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  margin-bottom: 10px;
}
/deep/.el-table .warning-row {
  background: rgb(233, 232, 232) !important;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
